<template>
	<view class="map" :class="[bgCahangeColor]">

		<!--  地图  -->
		<view class="map-item">
			<map class="TencentMap" :latitude="addrDel.latitude" :longitude="addrDel.longitude" show-location="true"
				scale="17"></map>
		</view>

		<!--  地址  -->
		<view class="top-adr">
			<view class="adr">地址：{{data.address}}</view>
			<view class="phone">{{data.gamerName}} {{data.mobile}}</view>
		</view>

		<!--  订单详情  -->
		<view class="order-msg" style="margin-top: 0rpx;">
			<view class="item">
				<view>订单单价</view>
				<view style="display: flex;">
					<view style="width: 80rpx;background-position: right" :class="[coinColor]"></view>
					<view style="min-width: 130rpx;text-align: right">{{singleMoney}}币</view>
				</view>
			</view>
			<view class="item">
				<view>订单时长</view>
				<view style="display: flex;">
					<view style="width: 80rpx;background-position: right" :class="[coinColor]"></view>
					<view style="min-width: 130rpx;text-align: right">{{ data.totalTime }}小时</view>
				</view>
			</view>
			<view class="item">
				<view>订单价格</view>
				<view style="display: flex;">
					<view style="width: 80rpx;background-position: right" :class="[coinColor]"></view>
					<view style="min-width: 130rpx;text-align: right">{{ data.totalFee }}币</view>
				</view>
			</view>
		</view>

		<view class="order-msg" style="margin-top: 0rpx;border: 0px">
			<view class="item">
				<view>订单编号</view>
				<view>{{ data.orderNo }}</view>
			</view>
			<!-- <view class="item">
				<view>优惠券</view>
				<view>暂无优惠券</view>
			</view> -->
			<view class="item">
				<view>备注信息</view>
				<view>{{ data.notes != "" ? data.notes : "暂无信息" }}</view>
			</view>
			<view class="item">
				<view>订单创建时间</view>
				<view>{{data.gmtCreate}}</view>
			</view>
			<view class="item">
				<view>开始计费时间</view>
				<view>{{ data.timeBegin }}</view>
			</view>
			<view class="item">
				<view>订单结束时间</view>
				<view>{{ data.timeEnd }}</view>
			</view>
		</view>

		<!-- 完成投诉按钮 -->
		<view class="btn" v-if="index === 0 || index === 2">
			<view :class="[bgColor]" @click="toFeedback">订单投诉</view>
		</view>
		<view v-if="index === 4 || index === 1">
			<view class="btn">
				<view :class="[bgColor]" @click="phone(1)">拨打电话</view>
				<view v-if="index === 4" :class="[bgColor]" @click="enterIn">确定到达</view>
				<view :class="[bgColor]" @click="toFeedback">订单投诉</view>
				<view :class="[bgColor]" @click="returnOrder" v-if="index !== 4">结束订单</view>
			</view>
			
			<view v-if="userFlag === 3" @click="sos" style="display: flex;flex-direction: column;justify-content: center;align-items: center">
				<u-icon name="/static/image/userDetails/qiujiu.png" size="60"></u-icon>
				<view>请求帮助</view>
			</view>
		</view>

		<!--  弹出框  -->
		<u-popup mode="bottom" border-radius="14" v-model="isShow" >
			<view class="pop-box">
				<view class="txt">为保证您的安全<br>请确认保持微信小程序<br>在后台持续运行<br>及录音和定位的开启<br>取消则无法确认到达</view>
				<view class="pop-btn">
					<view @click="isShow = false" class="cancel">取消</view>
					<view @click="phoneNum" class="confirm">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 弹出层警示 -->
		<u-modal v-model="show" :content="content" @confirm="confirm" :show-cancel-button="true"></u-modal>
		<u-toast ref="uToast" position="center" />
	</view>
</template>

<script>
	import {
		url,
		key
	} from '../../../MapValue/MapValue.js'
	import {
		getOrderData,
		POSTionOrder
	} from '../../../api/order.js'
	import {
		SOS
	} from "../../../api/sos";
	import {
		request
	} from '../../../utils/request.js';

	export default {
		name: "index",
		onLoad(options) {
			// 接收上一个页面传递的数据
			let data = JSON.parse(decodeURIComponent(options.data))
			this.index = data.index
			this.orderNo = data.orderNo
			this.getOrderList(data)
			this.getLocation();

			// 获取用户身份
			this.userFlag = uni.getStorageSync('userInfo').flag
		},
		data() {
			return {
				// 显示按钮
				index:0,
				// 弹出层
				content: "",
				isShow: false,
				show: false,
				name: "",
				// 用户身份
				userFlag: 0,
				// 订单编号
				orderNo: '',
				id: 0,
				longitude: 0, //记录实时点击位置
				latitude: 0,
				originalLongitude: 0, //记录用户当前真实位置随时返回
				originalLatitude: 0,
				scale: '16',
				//是否解析地址信息
				geocode: true,
				// 定位标记
				covers: [{
					longitude: this.longitude,
					latitude: this.latitude,
					iconPath: '../../static/imgs/nowPosition.png',
					width: 30,
					height: 30,

					label: {
						content: '当前位置',
						textAlign: 'center',
						color: '#FB3109'
					}
				}],
				//获取的地址信息
				position: '',
				//记录用户当前真实位置随时返回
				originalPosition: '',
				data: {},
				isShow: false,
				// 地图对象
				title: 'map',
				// 获取个人定位对象
				addrDel: {},
				icon: "../../../static/image/map/定位.png",
				// 单价
				singleMoney: 0,
				tag: 0
			}
		},
		methods: {
			// 结束订单
			returnOrder() {
				// 弹窗
				this.show = true
				this.content = "是否结束订单"
			},
			async confirm() {
				this.phone(5)
				this.isShow = false
			},
			// 确认到达弹窗
			enterIn() {
				this.isShow = true
			},
			// 确认定位到达
			async phoneNum() {
				// 定位
				this.getLocation()
				let tude = {
					"latitude": this.addrDel.latitude,
					"longitude": this.addrDel.longitude,
					"order": this.orderNo
				}
				// 确认定位
				const req = await POSTionOrder(tude)
				if (req.data.code === 200) {
					this.$refs.uToast.show({
						title: req.data.data,
						type: "success"
					})
					uni.navigateBack({
					  success: () => {
					    let page = getCurrentPages().pop();//跳转页面成功之后
					    if (page) {
					      let e = {
							  index:this.index
						  };
					   	  page.onLoad(e);//执行上个页面的方法
					    };
					  }
					})
				} else {
					this.$refs.uToast.show({
						title: req.data.msg,
						type: "error"
					})
				}
				this.isShow = false
			},
			// 拨打电话
			async phone(tag) {
				let data = {
					"mtag": "",
					"orderNo": this.orderNo,
					"tag": tag,
					"sift": this.userFlag
				}
				if (this.userFlag === 1) {
					data.tag = tag
				}
				if (this.userFlag === 2) {
					data.tag = tag
				}
				if (this.userFlag === 3) {
					data.mtag = tag
				}
				const res = await getOrderData(data)
				if(res.data.code !== 200) {
					this.$refs.uToast.show({
						title:"订单错误,请联系客服处理",
						type:"error"
					})
					return
				};
				if (tag === 1) {
					uni.makePhoneCall({
						phoneNumber: res.data.data.mobile.toString()
					})
				}
				if(tag === 5) {
					// 结束订单
					uni.navigateBack({
					  success: () => {
					    let page = getCurrentPages().pop();//跳转页面成功之后
					    if (page) {
					      let e = {
							  index:this.index
						  };
					   	  page.onLoad(e);//执行上个页面的方法
					    };
					  }
					})
				};
			},
			// 获取用户订单详情
			async getOrderList(data) {
				const res = await getOrderData(data)
				this.data = res.data.data
				this.orderNo = this.data.orderNo
				this.singleMoney = res.data.data.price
			},
			// 投诉
			toFeedback() {
				let deliverData = {
					orderId: this.orderNo
				}
				uni.navigateTo({
					url: `/subPages/subFeedback/index?data=${encodeURIComponent(JSON.stringify(deliverData))}`
				})
			},
			// 获取用户当前位置
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					//设置该参数为true可直接获取经纬度及城市信息
					// latitude  纬度
					// longitude 经度
					geocode: true,
					success: function(res) {
						that.addrDel = res;
					},
					fail: function() {
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				})
			},

			//请求帮助
			sos() {
				uni.showModal({
					title: '是否遇到危险',
					content: '发起求助后将向后台人员发送求助信息！',
					success: async function(res) {
						if (res.confirm) {
							let longitude = ''
							let latitude = ''
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									longitude = res.longitude
									latitude = res.latitude
								}
							});

							const sos = await SOS({
								gamerId: uni.getStorageSync('gamerInfo').id,
								latitude,
								longitude
							})

							uni.makePhoneCall({
								phoneNumber: '110' //仅为示例
							})
						} else if (res.cancel) {
						}
					}
				});
			}
		},
		computed: {
			bgColor() {
				let color = (this.userFlag.size == 2 ? 'blue' : 'red')
				return `zy-dark-bg-${color}`
			},

			txtColor() {
				let color = (this.userFlag.size == 2 ? 'blue' : 'red')
				return `zy-dark-${color}`
			},

			bgCahangeColor() {
				let gender = (this.userFlag.size == 2 ? 'boy' : 'girl')
				return `${gender}-bg`
			},

			coinColor() {
				let gender = (this.userFlag.size == '男' ? 'boy' : 'girl')
				return `${gender}-coin`
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/lib/css/color.scss";

	.TencentMap {
		height: 500rpx;
		width: 100%;
	}

	.map {
		padding: 10rpx;
		min-height: 100vh;

		.map-item {
			height: 500rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: bolder;
			border: 1px solid;
			box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}

		//地址
		.top-adr {
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
			white-space: nowrap;
			padding: 10rpx 50rpx;
			border: solid 1px #847f7d;
			border-radius: 10rpx;
			box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

			.adr {
				font-size: 40rpx;
				font-weight: bolder;
			}

			.phone {
				margin-top: 15rpx;
			}

		}

		//订单详情
		.order-msg {
			margin-top: 20rpx;
			padding: 30rpx 20rpx 40rpx 20rpx;
			border-bottom: black 1px dashed;

			.min {
				display: flex;
				justify-content: space-between;
				font-size: 40rpx;

				:nth-of-type(2) {
					font-weight: bold;
				}
			}

			.item {
				font-size: 35rpx;
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
			}

		}

		//按钮
		.btn {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid;
			color: white;
			height: 150rpx;
			padding: 20rpx 20rpx 10rpx 20rpx;
			border-bottom: solid 1px black;
			margin-bottom: 30rpx;

			view {
				padding: 0rpx 20rpx;
				border-radius: 30rpx;
				height: 50rpx;
				line-height: 50rpx;
				margin-top: auto;
			}
		}

		//弹出框
		.pop-box {
			padding: 20rpx 40rpx;
			font-size: 40rpx;
			font-weight: bolder;

			.txt {
				text-align: center;
				word-break: break-all;
			}

			.pop-btn {
				display: flex;
				justify-content: space-between;
				padding: 20px 20px 0px 20px;
				color: #ffffff;

				view {
					border-radius: 50rpx;
					padding: 10rpx 50rpx;
				}

				.cancel {
					background-color: #929497;
				}

				.confirm {
					background-color: #ea1d23;
				}
			}

		}
	}
</style>
